<script>
export default {
  name: 'RoomInfo',
  props: {
    id: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      roomInfo: {}
    }
  },
  created() {
    this.$api.sceneRoom.queryRoomDetail(this.id).then(response => {
      this.roomInfo = response.data
    })
  }
}
</script>

<template>
  <div class="room-info">
    <div>
      <h3>基本信息</h3>
      <el-row style="height: 32px">
        <el-col :span="6">空间id: {{ roomInfo.id }}</el-col>
        <el-col :span="6">空间名称: {{ roomInfo.roomName }}</el-col>
        <el-col :span="6">建筑面积(㎡): {{ roomInfo.roomArea }}</el-col>
        <el-col :span="6">所属项目: {{ roomInfo.projectName }}</el-col>
      </el-row>
      <el-row style="height: 32px">
        <el-col :span="6">所属楼栋: {{ roomInfo.edificeName }}</el-col>
        <el-col :span="6">所属楼层: {{ roomInfo.floorName }}</el-col>
        <el-col :span="6">所属公司: {{ roomInfo.companyName }}</el-col>
      </el-row>
    </div>
    <div>
      <h3>设备列表</h3>
      <el-table :data="roomInfo.devices">
        <el-table-column prop="deviceCode" label="设备编码" />
        <el-table-column prop="productTypeName" label="产品类型" />
        <el-table-column prop="deviceName" label="设备名称" />
        <el-table-column prop="deviceTypeName" label="设备类型" />
        <el-table-column prop="isFocusName" label="是否重点关注设备" />
        <el-table-column prop="projectName" label="所属项目" />
        <el-table-column prop="sceneInfoName" label="所属场景" />
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.room-info {
  padding: 12px;
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  background-color: #fff;
  overflow-y: auto;
}
</style>
